

$(document).ready(function(){
 
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    z=0; // Il n'y pour l'instant aucune '
    $i = 0;
    y=0; // Pour 0  il n'y pas de playlist en cours de lecture'
    page =0;
    // le document est chargÃ©
    
    $("a").click(function(){           
        
  
        page=$(this).attr("id");

        if(z == 0) // Pour le premier affichage (rien n'est en lecture)
        { 
            
            //on fait decendre le cube OK
//            $('#cube').animate({
//                top: '+z=80'
//              }, 800, function() {
//              });
             // On commence par retrecir les faces du cubes  OK
//            $('.face').animate({
//                height: '-=100',
//                width: '-=100'
//              }, 800, function() {
//              }); 
//            $('#cube').animate({
//                height: '-=100',
//                width: '-=100'
//              }, 0, function() {
//              }); 
//              
              
            // Puis on les repositionnes
//            $('.one').animate({
//                top: '+=50'
//              }, 300, function() {
//              });
//            $('.two').animate({
//                webkitTransform: '+=50'
//              }, 300, function() {
//              });
//            $('.three').animate({
//                right: '+=50'
//              }, 300, function() {
//              });
//            $('.five').animate({
//                left: '+=50'
//              }, 300, function() {
//              });
//            $('.six').animate({
//                bottom: '+=50'
//              }, 300, function() {
//              });
//              
              
           
            //enfin on fait apparaitre la bande marron OK
//          setTimeout(function() {
//      $('.headbarre1').animate({
//                top: '+=170'
//              }, 1500, function() {
//                // Animation complete.
//              });
//}, 500);y
      

  




        

  setTimeout(function() {
      
    $('#headbarre').addClass('headbarre2');
  $('#headbarre').removeClass('headbarre1');
      
 setTimeout(function() {$('.'+page).css('display','block');
      }, 1500); 

}, 750); 


          // ON AFFICHE LE PLAYER 

            z++;
            currentpage = page;
        }
        else 
        { // FAIRE DEUX CAS, 1er c'est en lecture alors c'est toujours le meme qui reste en bas et change que la playlist ( le currentpage est donc toujours la playlist en lecture) et un cas ou ce n'est pas en lecture et on efface tout et met la 'page' cliqué                                 $("."+currentpage).css('display', 'block');  
 $i = 0;
            for(var i = 0; i <7; i++)  // On parcours toutes les plalist et on regarde laquelle est en cours de lecture
            {
                var playing=$('.playlist'+i).children().attr("class");
        
                if(playing == 'sc-player playing' && page != 'menu_link' ) // On regarde si c'est en lecture'
                {
                    if(page != 'playlist'+i)// Si la page sur laquelle on clique est diff de page de la playlist alors
                    {
                        $('.playlist'+i).css('display', 'block');
                        $('div.playlist'+i+' div.sc-player ol.sc-trackslist').css('display', 'none');           
                        $('div.playlist'+i+' div.sc-player ol.sc-artwork-list').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-controls').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-info').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-scrubber').css('display', 'block'); 
  
                        $('.'+page).css('display', 'block');
                        $('.'+page+' div.sc-player ol.sc-trackslist').css('display', 'block');           
                        $('.'+page+' div.sc-player ol.sc-artwork-list').css('display', 'none');           
                        $('.'+page+' div.sc-player div.sc-controls').css('display', 'none');           
                        $('.'+page+' div.sc-player div.sc-info').css('display', 'none');           
                        $('.'+page+' div.sc-player div.sc-scrubber').css('display', 'none'); 
                               $('#auteur_playlist'+i).css('display', 'none'); 
                                  $i = 0;


                        y = 1;
                    // ON CACHE CETTE TRACKLIST                             
                    }else //autrement on affiche la page de la playlist
                    {
                        $('.playlist'+i).css('display', 'block');
                        $('div.playlist'+i+' div.sc-player ol.sc-trackslist').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player ol.sc-artwork-list').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-controls').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-info').css('display', 'block');           
                        $('div.playlist'+i+' div.sc-player div.sc-scrubber').css('display', 'block'); 
                           $i = 0;

                
            } 
             
                }
                else{ // Si elle est pas en lecture alors on cache tout les elements de la playlist
                    if(page != 'playlist'+i && page != 'menu_link')
                        $('.playlist'+i).css('display', 'none');    
                    $i++;
                    if($i == 7)
                        {y=0;
                         $i = 0;}
                } 
        
            }
           
            if(y != 1) // si aucune playlist est en cours alors on affiche toute la page cliqué et on efface la page actuelle
            {
                $('.'+page).css('display','block');
                if(currentpage != page)
                    {
                                $("."+currentpage).css('display', 'none');  }
                $('.'+page+' div.sc-player ol.sc-trackslist').css('display', 'block');           
                $('.'+page+' div.sc-player ol.sc-artwork-list').css('display', 'block');           
                $('.'+page+' div.sc-player div.sc-controls').css('display', 'block');           
                $('.'+page+' div.sc-player div.sc-info').css('display', 'block');           
                $('.'+page+' div.sc-player div.sc-scrubber').css('display', 'block'); 
                currentpage = page;
                y = 0; 
                $i = 0;
            }
        } 
    });
});

$(document).on('click','.playlist1 .sc-trackslist li', function(event) { // Si tu clique sur les tracklist alors ( on fait du cas par cas j'ai pas trouvé mieux deso bb'
    $(".playlist1").css('display', 'none');   
       $('#auteur_playlist2').css('display', 'none'); 
       $('#auteur_playlist3').css('display', 'none'); 
       $('#auteur_playlist4').css('display', 'none'); 
       $('#auteur_playlist5').css('display', 'none'); 
       $('#auteur_playlist6').css('display', 'none'); 

    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist1').css('display', 'block');
    $('.playlist1 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist1 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist1 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist1 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist1 div.sc-player div.sc-scrubber').css('display', 'block'); 
  
    currentpage =  playlist1;
     $i = 0;
});
  
$(document).on('click','.playlist2 .sc-trackslist li', function(event) {
     $i = 0;
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist2').css('display', 'block');
    $('.playlist2 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist2 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist2 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist2 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist2 div.sc-player div.sc-scrubber').css('display', 'block'); 
  
    currentpage =  playlist2;
}); 
  
$(document).on('click','.playlist3 .sc-trackslist li', function(event) {
     $i = 0;
      $('#auteur_playlist2').css('display', 'none'); 
       $('#auteur_playlist1').css('display', 'none'); 
       $('#auteur_playlist4').css('display', 'none'); 
       $('#auteur_playlist5').css('display', 'none'); 
       $('#auteur_playlist6').css('display', 'none'); 
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist3').css('display', 'block');
    $('.playlist3 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist3 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist3 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist3 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist3 div.sc-player div.sc-scrubber').css('display', 'block'); 
  
    currentpage =  playlist3
    
});
$(document).on('click','.playlist4 .sc-trackslist li', function(event) {
       $('#auteur_playlist2').css('display', 'none'); 
       $('#auteur_playlist1').css('display', 'none'); 
       $('#auteur_playlist3').css('display', 'none'); 
       $('#auteur_playlist5').css('display', 'none'); 
       $('#auteur_playlist6').css('display', 'none'); 
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist4').css('display', 'block');
    $('.playlist4 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist4 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist4 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist4 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist4 div.sc-player div.sc-scrubber').css('display', 'block'); 
  
    currentpage =  playlist4;
     $i = 0;
}); 
  
$(document).on('click','.playlist5 .sc-trackslist li', function(event) {
       $('#auteur_playlist2').css('display', 'none'); 
       $('#auteur_playlist1').css('display', 'none'); 
       $('#auteur_playlist3').css('display', 'none'); 
       $('#auteur_playlist4').css('display', 'none'); 
       $('#auteur_playlist6').css('display', 'none'); 
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist5').css('display', 'block');
    $('.playlist5 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist5 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist5 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist5 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist5 div.sc-player div.sc-scrubber').css('display', 'block'); 
  
    currentpage =  playlist5;
     $i = 0;
});
  
$(document).on('click','.playlist6 .sc-trackslist li', function(event) {
       $('#auteur_playlist2').css('display', 'none'); 
       $('#auteur_playlist1').css('display', 'none'); 
       $('#auteur_playlist4').css('display', 'none'); 
       $('#auteur_playlist5').css('display', 'none'); 
       $('#auteur_playlist3').css('display', 'none'); 
    $(".playlist1").css('display', 'none');   
    $(".playlist2").css('display', 'none');   
    $(".playlist3").css('display', 'none');   
    $(".playlist4").css('display', 'none');   
    $(".playlist5").css('display', 'none');   
    $(".playlist6").css('display', 'none');   
    $('.playlist6').css('display', 'block');
    $('.playlist6 div.sc-player ol.sc-trackslist').css('display', 'block');           
    $('.playlist6 div.sc-player ol.sc-artwork-list').css('display', 'block');           
    $('.playlist6 div.sc-player div.sc-controls').css('display', 'block');           
    $('.playlist6 div.sc-player div.sc-info').css('display', 'block');           
    $('.playlist6 div.sc-player div.sc-scrubber').css('display', 'block'); 
   $i = 0;
    currentpage =  playlist6;
});
  
  


 

        
(function ($) {
idleTimer = null;
idleState = false;
idleWait = 10000;
    $(document).ready(function () {
    
        $('*').bind('mousemove keydown scroll', function () {
        
            clearTimeout(idleTimer);
         
            
            idleState = false;
            
            idleTimer = setTimeout(function () { 
//                               $("#experiment").fadeOut('slow');  
//          $('.headbarre1').addClass('headbarre3');
//          
//
//       $('.'+page).fadeOut(160);
      
    // Idle Event
                idleState = true; }, idleWait);
        });
        
        $("body").trigger("mousemove");
    
    });
}) (jQuery)